<template>
	<view>
		<public-module></public-module>
		<view class="signOut">
		    <view class="setUp">
		        <view class="upList u-flex" v-for="(item,index) in upList" :key="index" @click="item.onEvent && onClick(item.onEvent)">
                    <view class="title u-flex-m">{{item.title}}</view>
                    <view class="text" v-if="item.title=='手机号' && item.text!='去绑定'">{{item.text | phone}}</view>
                    <view class="text" v-else>{{item.text}}</view>
                    <block v-if="!item.iconRightHide">
                        <u-icon name="arrow-right" :size="14" color="#333"></u-icon>
                    </block>
                    <!-- #ifdef APP-PLUS -->
                    <!-- app删除缓存 -->
                    <view class="u-p-l-14" v-if="item.iconDel" @tap.stop="appClearCache">
                        <u-icon name="trash" :size="20" color="#888"></u-icon>
                    </view>
                    <!-- #endif -->
                    <!-- #ifdef MP-WEIXIN -->
                    <!-- 微信手机授权 -->
                    <button v-if="item.buttonType == 'getPhoneNumber' && !item.iconRightHide" class="itemButton" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber"></button>
                    <!-- #endif -->
                    <!-- #ifdef MP-ALIPAY -->
                    <!-- 支付宝手机授权 -->
                    <button v-if="item.buttonType == 'getPhoneNumber' && !item.iconRightHide" class="itemButton" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="decryptPhoneNumber" @error="onAuthError"></button>
                    <!-- #endif -->
		        </view>
		    </view>
		    
            <view class="u-p-t-50" v-if="userInfo.token">
                <u-button shape="square" type="error" @click="loginOut">退出登录</u-button>
            </view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
// #ifdef MP
import { getPhoneInfo } from '@/config/login';
import { mpUpData } from '@/config/common';
// #endif
// #ifdef APP-PLUS
import { formatSize,clearCache } from '@/config/common';
import APPUpdate from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
// #endif
export default {
    computed:{
        ...mapState(['userInfo'])
    },
	data() {
		return {
            upList:[],
            isTestBtn:false,
            offUserInfo:{},//授权的个人信息
            fileSizeString:'',//App缓存大小
            versionInfo:{},//版本信息
        }
	},
	onLoad() {
        var phone = this.$store.state.userInfo.phoneNum || ''
        // #ifdef MP
        this.upList = [{
            title: "检查更新",
            onEvent: "mpUpData",
        }, {
            title: "手机号",
            onEvent: '',
            buttonType: "getPhoneNumber",
            text: phone?phone:'去绑定',
            iconRightHide: phone?true:false, //true:隐藏箭头，false:默认显示
        }];
        // #endif
        // #ifdef H5
        this.upList = [{
            title: "手机号",
            onEvent: phone?'':'openBindPhone',
            buttonType: "",
            text: phone?phone:'去绑定',
            iconRightHide: phone?true:false, //true:隐藏箭头，false:默认显示
        }]
        // #endif
        // #ifdef APP-PLUS
        this.upList = [{
            title: "检查更新",
            onEvent: "appUpData",
        }, {
            title: "当前版本",
            onEvent: "",
            text: '',
            iconRightHide: true, //true:不显示箭头
        }, {
            title: "手机号",
            onEvent: phone?'':'openBindPhone',
            buttonType: "",
            text: phone?phone:'去绑定',
            iconRightHide: phone?true:false, //true:隐藏箭头，false:默认显示
        }, {
            title: "缓存大小",
            onEvent: "",
            text: "",
            iconRightHide: true, //true:不显示箭头
            iconDel: true, //true:显示删除按钮
        }];
        this.appFormatSize() //计算app缓存大小
        this.getCurrentNo() //获取版本号
        // #endif
        
	},
    onShow() {
        this.bindPhoneSuccess()
    },
	methods: {
		...mapMutations(['emptyUserInfo','setUserInfo']),
        onJump(url) {
            uni.navigateTo({
                url: url
            });
        },
		loginOut() {
            // #ifndef APP-PLUS
            uni.showModal({
                title: '退出登录',
                content: '你确定退出登录吗？',
                success(res) {
                    if(res.confirm) {
                        this.emptyUserInfo();
                        setTimeout(()=>{
                            uni.navigateBack({delta: 1})
                        },500)
                    }else if (res.cancel) {}
                }
            })
            // #endif
            // #ifdef APP-PLUS
            this.$showModal({
                    concent:'账号绑定成功！',
                }).then(res=>{
                    uni.navigateBack();
                }).catch(res=>{})
            // #endif
		},
		onClick(e){
            if(e=='mpUpData'){//小程序更新
                this.inspectMpUpData()
            }else if(e=='openBindPhone'){
                this.openBindPhone(1)
            }else if(e=='appUpData'){
                this.appUpData()
            }
        },
        //檢查小程序更新
        inspectMpUpData(){
            // #ifdef MP
            var that = this
            mpUpData(res=>{
                if(res.type===1){
                    //请求完新版本信息的回调
                    if(!res.data.hasUpdate){
                        that.$u.toast('当前没有新版发布')
                    }
                }else if(res.type===2){
                    // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
                    uni.showModal({
                        title: '提示',
                        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
                    })
                }
            })
            // #endif
        },
        appUpData(){
            APPUpdate() //检测app更新
        },
        // App计算缓存
        appFormatSize() {
            let that = this;
            formatSize(res=>{
                that.fileSizeString = res
                that.upList[3].text = res
            })
        },
        // App清理缓存
        appClearCache() {
            console.log('清除缓存--')
            let that = this;
            clearCache(this.fileSizeString).then(()=>{
                 that.appFormatSize()
            })
        },
        //授权手机号
        decryptPhoneNumber(e) {
            console.log(e,'授权手机号')
            var that = this
            // #ifdef MP-WEIXIN
        	if(e.detail.errMsg == 'getPhoneNumber:ok'){
                if(e.detail.iv){
                    var authorizeInfo = e.detail;
                    //请去getPhoneInfo方法中使用您的接口绑定信息
                    getPhoneInfo(authorizeInfo, info=>{
                        //绑定成功后--保存您的信息
                        // var userInfo = {
                        //     phoneNum: res.phoneNum,
                        // };
                        // that.setUserInfo(userInfo);
                        // that.bindPhoneSuccess()
                        setTimeout(()=>{
                            uni.$u.toast('绑定成功')
                        },100)
                    }, err=>{
                        that.openBindPhone(2,'获取手机号失败,请使用手机号登录')
                    });
                }else{
                    that.openBindPhone(2,'获取手机号失败,请使用手机号登录')
                }
        	}else{
                // 拒绝
                this.onAuthError()
            }
            // #endif
            
            // #ifdef MP-ALIPAY
            uni.getPhoneNumber({
                success:(res)=>{
                    console.log(res.response,'res.response')
                    //请去getPhoneInfo方法中使用您的接口绑定信息
                    getPhoneInfo(res.response, res=>{
                        //绑定成功后--保存您的信息
                        // var userInfo = {
                        //     phoneNum: res.phoneNum,
                        // };
                        // that.setUserInfo(userInfo);
                        // that.bindPhoneSuccess()
                        setTimeout(()=>{
                            uni.$u.toast('绑定成功')
                        },100)
                    }, err=>{
                        that.openBindPhone(2,'获取手机号失败,请使用手机号登录')
                    });
                },
                fail:(res)=>{
                    that.openBindPhone(2,'获取手机号失败,请使用手机号登录')
                }
            })
            // #endif
        },
        // 拒绝手机授权
        onAuthError(e){
            this.openBindPhone(2,'您已拒绝，可使用手机号绑定~')
        },
        // 手机号绑定成功回调方法
        bindPhoneSuccess(){
            var phoneNum = this.$store.state.userInfo.phoneNum || ''
            if(phoneNum){
                let index = 1 //手机号所在upList的位置index
                let onEvent = ''
                // #ifdef APP-PLUS
                index = 2
                // #endif
                // #ifdef H5
                index = 0
                // #endif
                // #ifdef MP
                index = 1
                onEvent = phoneNum
                // #endif
                this.upList[index] = {
                    title: "手机号",
                    onEvent: onEvent,
                    text: phoneNum,
                    iconRightHide: true, //true:隐藏箭头，false:默认显示
                }
            }
        },
        openBindPhone(type=1,content){
            var that = this
            if(type==1){
                that.onJump('/pages/user/login') //绑定号码可以自定义页面或者弹窗
            }else if(type==2){
                uni.showModal({
                    title: "温馨提示",
                    content: content,
                    success(res) {
                        if (res.confirm) {
                            that.onJump('/pages/user/login') //绑定号码可以自定义页面或者弹窗
                        }
                    }
                });
            }
        },
        // 获取当前应用的版本号
        getCurrentNo(callback) {
            var that = this
        	// 获取本地应用资源版本号
        	plus.runtime.getProperty(plus.runtime.appid, function(inf) {
                that.versionInfo = {
        			versionCode: inf.versionCode,
        			versionName: inf.version
        		}
                that.upList[1].text = inf.version
        	});
        }

	}
};
</script>

<style lang="scss">
page {
    background: #fff;
}
.signOut {
    padding: 32rpx;
}
.setUp {
    .upList{
        position: relative;
        background: #fff;
        // line-height: normal;
        padding: 32rpx 0;
        border-bottom: 1rpx solid #eee;
        .title {
            font-size: 30rpx;
            color: #333;
        }
        .text{
            font-size: 28rpx;
            color: #888;
        }
        .itemButton{
            border-radius: 0;
            text-align: left;
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        &:last-child{
            border-bottom: none;
        }
    }
}

</style>
